import React,{Component} from 'react';
import { Container, Row, Col } from 'reactstrap';
import { Media,Button } from 'reactstrap';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
import {connect} from 'react-redux';
import {fetchList} from '../../actions/yingping';

const mapStateToProps=state=>{
    console.log(state); 
    return{
        lists:state.yingping.lists
    }
}
class YingPing extends Component{
    componentDidMount(){
        this.props.fetchList();
    }
 render(){
     var list=(this.props.lists)[0];
   return(
            <Container styleName="yingping">
                <Row styleName="banner">
                    <img src="../../images/collect.jpg"/>
                </Row>
                <Row>
                    {/*left*/}
                    <Col xs={{ size: 6, offset: 1 }}>
                        <Row styleName="title">
                            <span styleName="tuisong">推送123</span>
                            <span>|</span>
                            <span styleName="yingping">影评</span>
                        </Row>
                        <Row styleName="hotTitle">
                        <p>热门评论</p>
                        </Row>
                        <Row styleName="comment">
                            <Col xs="2">
                                <img src="../../images/touxiang.jpg"/>
                            </Col>
                            <Col xs="10">
                                <Row>
                                    <Col xs="12">
                                    <p>为了国家正义</p>
                                    </Col>
                                    <Col xs="12">
                                        <span>Gogui..</span>
                                        <span>评《<span>{list.cname}</span>》</span>
                                        <span styleName="pingFen">8.2</span>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row styleName="jieshao">
                            <Col xs={{ size: 11, offset: 1 }}>
                                <img src={list.cimage}/>
                                <div>
                                    <p>{list.content}</p>
                                    <p>文：<span>史歌</span></p>
                                    <p>{list.cdate}</p>
                                </div>
                            </Col>
                        </Row>
                        {/*<Row styleName="btn">
                                <button styleName="btn-left">发表评论</button>
                                <button styleName="good">
                                    <img src="../../images/good.png"/>
                                    <span>345</span>
                                </button>
   </Row>*/}
                    </Col>
                     {/*right*/}
                    <Col xs={{ size: 4, offset: 1 }}>
                        <Row styleName="hotTitle">
                            <p>热门群组</p>
                        </Row>
                        <Row styleName="qunZu">
                            <Col xs="3">
                                <img src="../../images/touxiang.jpg"/>
                            </Col>
                            <Col xs="9">
                                <p styleName="qz-head">
                                    <span>影视杂谈</span>
                                    <span>|</span>
                                    <span>八卦闲聊</span>
                                </p>
                                <p styleName="qz-btm">成员:
                                    <span>36045</span>
                                </p>
                            </Col>
                        </Row>

                        <div styleName="hotList">
                            <p>在这里交流你对电视剧网剧电影在这里交流你对电视剧网剧电影在这里交流你对电视剧网剧电影在这里交流你对电视剧网剧电影...</p>
                        </div>
                        <div styleName="hotList">
                            <p>影视资源分享</p>
                            <p>成员:<span>6530</span></p>
                        </div>
                        <div styleName="hotList">
                            <p>影视片源集中地</p>
                            <p>成员:<span>5177</span></p>
                        </div>
                        <div styleName="hotList">
                            <p>推理影视</p>
                            <p>成员:<span>2467</span></p>
                        </div>
                        <div styleName="hotList">
                            <p>峰点点影视 免费看最新电影电视</p>
                            <p>成员:<span>3518</span></p>
                        </div>
                        <div styleName="hotList">
                            <p>影视·电影</p>
                            <p>成员:<span>1546</span></p>
                        </div>
                    </Col>
                </Row>
            </Container>
        )
    }
}
var yingpingCSS=CSSModules(YingPing, styles, { allowMultiple: true });
export default connect(mapStateToProps,{fetchList})(yingpingCSS)